<%@page contentType="text/html;charset=utf-8"%>
<%@include file="../common/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>用户注册 - 当当网</title>
		<link href="<%=request.getContextPath()%>/css/shop_cart.css" rel="stylesheet" type="text/css" />
		<link href="${pageContext.request.contextPath}/css/login.css"
			rel="stylesheet" type="text/css" />
		<link href="${pageContext.request.contextPath}/css/page_bottom.css"
			rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="../js/jquery-1.7.2.js" charset="utf-8"></script>
		<script type="text/javascript" src="../js/jquery.validate.js" charset="utf-8"></script>
		<script type="text/javascript" src="../js/messages_cn.js" charset="utf-8"></script>
		<script type="text/javascript" src="../js/jquery.metadata.js" charset="utf-8"></script>
		<script type="text/javascript" src="../js/registerFormValidation.js" charset="utf-8"></script>
		<script type="text/javascript">
			$(function (){
				var validator=$("#registerForm").validate(validateOptions);
			});
			
		</script>
		
		<style type="text/css">
		    /*jQuery.Validate自定义样式开始*/
		    
			#registerForm label.error{
		    		font-weight: bold;
		    		float:none;
		            background: url(../images/unchecked.gif) no-repeat 0px 0px;
		            color: red;
		            padding-left: 1.5em;
		            vertical-align:top;
		    }
		    #registerForm label.success{
		    		float:none;
		            background: url(../images/checked.gif) no-repeat 0px 0px;
		            padding-left: 1.5em;
		            vertical-align:top;
		            color: black;
		    }
		    input.error{
		            border: dashed 1px red;
		            background-color: #E8FBFF;
		    }
		   	/*jQuery.Validate自定义样式结束*/
		</style> 
	</head>
	<body>
		<%@include file="../common/head1.jsp"%>
		<div class="flow_step_no1 flow_step_no0_n">
		<div class="flow_step">
			<ol class="cols4">
				<li class="step_1">填写信息</li>
				<li class="step_2">验证邮箱</li>
				<li class="step_3">注册成功</li>
			</ol>
		</div>
		</div>
		<div class="fill_message">
			<form name="registerFormOne" id="registerForm" method="post" action="registerOne.action" onsubmit="return validateForm(this);">
				<h2>
					以下均为必填项
				</h2>
				<table class="tab_login">
					<tr>
						<td valign="top" class="w1">
							请填写您的Email地址：
						</td>
						<td>
							<input type="text" name="user.email" value="" id="txtEmail" class="text_input">
							<div class="text_left" id="emailValidMsg">
								<p>
									请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
								</p>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置您在当当网的昵称：
						</td>
						<td>
							<input type="text" name="user.nickname" value="" id="txtNickName" class="text_input">
							<div class="text_left" id="nickNameValidMsg">
								<p>
									您的昵称可以由小写英文字母、中文、数字组成，
								</p>
								<p>
									长度4－20个字符，一个汉字为两个字符。
								</p>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置密码：
						</td>
						<td>
							<input type="password" name="user.password" value="" id="txtPassword" class="text_input">
							<div class="text_left" id="passwordValidMsg">
								<p>
									您的密码可以由大小写英文字母、数字组成，长度6－20位。
								</p>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							再次输入您设置的密码：
						</td>
						<td>
							<input type="password" name="repeatPass" class="text_input">
							<div class="text_left" id="repeatPassValidMsg">
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							验证码：
						</td>
						<td>
							<img class="yzm_img" id='imgVcode' src="${pageContext.request.contextPath}/verifyImg.do"/>
							<input name="user.verifyCode" type="text" id="txtVerifyCode"
								class="yzm_input" onblur="" />
							<div class="text_left t1">
								<p class="t1">
									<span id="vcodeValidMsg">请输入图片中的四个字母。</span><a href="javascript:;" 
										onclick="$('#imgVcode').attr('src','${pageContext.request.contextPath}/verifyImg.do?'+new Date().getTime())">看不清楚？换个图片</a>
								</p>
								<p style="color: red">
									
								</p>
							</div>
						</td>
					</tr>
				</table>
				<br /><br />
				<div class="login_in">
					<input type="submit" value="注 册" id="btnClientRegister" class="btn_hit_bx">
					<input type="reset" value="重 置" class="btn_hit_bx">
				</div>
			</form>
		</div>
		<%@include file="../common/foot1.jsp"%>
	</body>
</html>

